<template>
    <div style="margin: 0px;">
        <div class="Permissiond" :style="{ zIndex: zindex, backgroundColor: whitecolor, display: showd ? 'block' : 'none' }">
            <span :style="{ display: showd ? 'block' : 'none' }">🔒权限不足</span>
        </div>
        <div style="background-color: rgb(232, 237, 244);width: 100%;height: 100%;">
            <el-row :gutter="20" style="">
                <el-col :span="16">
                    <div class="grid-content bg-purple" id="topdiv">
                        <img class="imgtop" src="../../assets/img/zsy3.png" alt="">
                        <el-table :data="tableData" :cell-style="{ 'text-align': 'center' }"
                            :header-cell-style="{ 'text-align': 'center', 'height': '50px', 'color': 'black', 'background': 'rgb(70, 151, 237)' }"
                            stripe
                            style="width: 100%; height: 100%;max-height: 600px; overflow-y: auto; overflow-x: auto; position: sticky;">
                            <el-table-column prop="purchaseId" label="采购编号" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="relevantData" label="相关数据" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="applicant" label="申请人" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="applyTime" label="申请日期" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="supplier" label="供应商" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="purchaseCost" label="采购费用" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content bg-purple" id="te1">
                        <img class="imgtop2" src="../../assets/img/szproject/6.png" alt="">
                        <div class="licenter">
                            <div class="licenternei">
                                <div style="display: flex;">
                                    <img src="../../assets/img/portal/6.png" alt="">
                                    <div style="margin-top: 6px;">
                                        <span>729.50万元</span><br>
                                        <span>采购总金额</span>
                                    </div>
                                </div>
                            </div>
                            <div class="licenternei">
                                <div style="display: flex;">
                                    <img src="../../assets/img/portal/6.png" alt="">
                                    <div style="margin-top: 6px;">
                                        <span>483.00万元</span><br>
                                        <span>主辅料采购金额</span>
                                    </div>
                                </div>
                            </div>
                            <div class="licenternei">
                                <div style="display: flex;">
                                    <img src="../../assets/img/portal/7.png" alt="">
                                    <div style="margin-top: 6px;">
                                        <span>82.35万元</span><br>
                                        <span>固定资产采购金额</span>
                                    </div>
                                </div>
                            </div>
                            <div class="licenternei">
                                <div style="display: flex;">
                                    <img src="../../assets/img/portal/8.png" alt="">
                                    <div style="margin-top: 6px;">
                                        <span>15</span><br>
                                        <span>新增供应商数量</span>
                                    </div>
                                </div>
                            </div>
                            <div class="licenternei">
                                <div style="display: flex;">
                                    <img src="../../assets/img/portal/9.png" alt="">
                                    <div style="margin-top: 6px;">
                                        <span>8</span><br>
                                        <span>仓库物料预警</span>
                                    </div>
                                </div>
                            </div>
                            <div class="licenternei">
                                <div style="display: flex;">
                                    <img src="../../assets/img/portal/9.png" alt="">
                                    <div style="margin-top: 6px;">
                                        <span>3</span><br>
                                        <span>质检问题</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="grid-content bg-purple" id="te2">
                        <div>
                            <img @click="zzzaaa" style="width: 100%;height: 80px;"
                                src="../../assets/img/szproject/1.png" alt="">
                            <span style="font-size: 15px;">采购需求</span>
                        </div>
                        <div>
                            <img @click="btn" style="width: 100%;height: 80px;" src="../../assets/img/szproject/5.png"
                                alt="">
                            <span style="font-size: 15px;">采购订单</span>
                        </div>
                        <div>
                            <img @click="contract" style="width: 100%;height: 80px;"
                                src="../../assets/img/szproject/4.png" alt="">
                            <span style="font-size: 15px;">发票管理</span>
                        </div>
                        <div>
                            <img @click="zsy" style="width: 100%;height: 80px;" src="../../assets/img/szproject/3.png"
                                alt="">
                            <span style="font-size: 15px;">采购入库</span>
                        </div>
                        <div>
                            <img @click="caigou" style="width: 100%;height: 80px;"
                                src="../../assets/img/szproject/2.png" alt="">
                            <span style="font-size: 15px;">售后记录</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content bg-purple" id="zhongdiv">
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width: 100%;">
                            <el-tab-pane label="采购需求" name="first">
                                <el-table :data="tableData2" :cell-style="{ 'text-align': 'center' }"
                                    :header-cell-style="{ 'text-align': 'center' }" stripe
                                    style="width: 100%; max-height: 320px; overflow-y: auto;">
                                    <el-table-column prop="relatedTo" label="相关项目"></el-table-column>
                                    <el-table-column prop="initiatingDepartment" label="发起部门"></el-table-column>
                                    <el-table-column prop="itemName" label="采购产品"></el-table-column>
                                    <el-table-column prop="requiredQuantity" label="需求数量"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="采购合同" name="second">
                                <el-table :data="tableData2" :cell-style="{ 'text-align': 'center' }"
                                    :header-cell-style="{ 'text-align': 'center' }" stripe
                                    style="width: 100%; max-height: 320px; overflow-y: auto;">
                                    <el-table-column prop="risk" label="相关项目"></el-table-column>
                                    <el-table-column prop="riskstatus" label="供应商"></el-table-column>
                                    <el-table-column prop="time" label="采购产品"></el-table-column>
                                    <el-table-column prop="name" label="合同金额"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <!-- <el-tab-pane label="采购风险" name="third">
                                <el-table :data="tableData2" :cell-style="{ 'text-align': 'center' }"
                                    :header-cell-style="{ 'text-align': 'center' }" stripe
                                    style="width: 100%; max-height: 300px; overflow-y: auto;">
                                    <el-table-column prop="risk" label="相关项目"></el-table-column>
                                    <el-table-column prop="riskstatus" label="供应商"></el-table-column>
                                    <el-table-column prop="time" label="采购产品"></el-table-column>
                                    <el-table-column prop="name" label="小计"></el-table-column>
                                </el-table>
                            </el-tab-pane> -->
                        </el-tabs>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple" id="te3">
                        <div style="display: flex;margin-left: 20px;padding-top: 20px;">
                            <span>新增合同条款</span>
                        </div>
                        <el-table :data="tableData3" style="width: 100%;">
                            <el-table-column prop="text" label=""></el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { list, PRlist } from '../../api/login';
export default {
    mounted() {
        this.PRli(),
            this.queryData()
    },
    data() {
        return {
            zindex: "",
            showd: true,
            activeName: 'first',
            // 采购订单
            tableData: [],
            tableData3: [
                {
                    text: '一般采购合同所有权转移及风险承担条款标的物所有权自标的物交付时起转移。出卖人就交付的标的物，负有保证第三人不向买受人主张任何权利的义务。'
                },
                {
                    text: '般采购合同所有权转移及风险承担条款标的物所有权自标的物交付时起转移。出卖人就交付的标的物，负有保证第三人不向买受人主张任何权利的义务。'
                },
                {
                    text: '一般采购合同所有权转移及风险承担条款标的物所有权自标的物交付时起转移。出卖人就交付的标的物，负有保证第三人不向买受人主张任何权利的义务。'
                }
            ],
            // 采购需求
            tableData2: [],
        }
    },
    methods: {
        first() {
            console.log('tiao')
            this.$router.push('/maheimei/table1')
        },
        payment() {
            this.$router.push('/maheimeicom/Payment')
        },
        vchart() {
            this.$router.push('/maheimeicom/vchart')
        },
        caigou() {
            this.$router.push('/BasicInformation/caigou')
        },
        contract() {
            this.$router.push('/BasicInformation/contract')
        },
        zsy() {
            this.$router.push('/caigoushangcheng/caigoushangcheng')

        },
        zzzaaa() {
            this.$router.push('/first/first')
        },
        btn() {
            this.$router.push('/BasicInformation/sanDanPiPei')
        },
        PRli() {
            let data = {
                pageNum: 1,
                pageSize: 15
            }
            list(data).then(res => {
                if (res.code == 0) {
                    console.log(res);
                    this.showd = !this.showd
                    this.tableData = res.data.items
                    console.log(this.tableData);
                } else {
                    this.zindex = '1000'
                    // alert("没有权限")
                    this.showd = this.showd
                }
            })
        },
        // 查询
        queryData() {
            let data = {
                pageNum: 1,
                pageSize: 50,
                relatedTo: null,
                initiatingDepartment: null,
                itemName: null
            }
            PRlist(data).then(res => {
                console.log("res.data.items");
                console.log(res.data.items);
                this.tableData2 = res.data.items
            })
        }
    }
}
</script>

<style>
.Permissiond {
    position: fixed;
    width: 100%;
    height: 100%;
    color: rgb(234, 240, 246);
    padding-left: 35%;
    padding-top: 20%;
    font-size: 50px;
    background-color: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li {
    list-style: none;
}

.imgtop {
    width: 100%;
    width: 100%;
    height: 150px;
}

li {
    list-style: none;
}

.imgtop {
    width: 100%;
    width: 100%;
    height: 150px;
}

.imgtop2 {
    width: 100%;
    width: 100%;
    height: 150px;
}

#topdiv {
    width: 100%;
    width: 100%;
    text-align: center;
    height: 650px;
    background-color: rgb(255, 255, 255);
}

.imgtop2 {
    width: 100%;
    height: 150px;
}

#topdiv {
    width: 100%;
    text-align: center;
    height: 650px;
    background-color: rgb(255, 255, 255);
}

#te1 {
    width: 100%;
    height: 510px;
}

#te2 {
    width: 100%;
    height: 130px;
    display: flex;

}

#te2 div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    margin-left: 8%;

}

#zhongdiv {
    height: 100%;
    width: 100%;
    height: 100%;
    width: 100%;
}

#te3 {
    width: 100%;
    width: 100%;
    height: 400px;

}

#buttondiv {
    height: 450px;
    width: 100%;
    width: 100%;
}

#te4 {
    width: 100%;
    width: 100%;
    height: 450px;
}

#te2 {
    margin-top: 10px;
}

.licenter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    width: 100%;
    height: 355px;
    margin-left: 20px;
}

.licenternei {
    width: 200px;
}

.Risk1 {
    display: flex;
    margin-top: 40px;
    margin-left: 30px;
}

.Risk2 ul {
    margin-top: 40px;
}

.Riskul li {
    margin-top: 25px;
    list-style-type: square
}

.el-row {
    margin-bottom: 20px;

}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: rgb(232, 237, 244);
}

.bg-purple {
    background: rgb(255, 255, 255);
}

.bg-purple-light {
    background: #ffffff;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

/* ddd */
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
